/**
 * Created by cz on 2017/5/4.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Navigator,
    TouchableOpacity,
    Image,
    TouchableHighlight,
    ScrollView
} from 'react-native';
import PopularPage from "./PopularPage";
import MyPage from "./my/MyPage";
import AsyncStorageTest from "../../AsyncStorageTest";
import TabNavigator from 'react-native-tab-navigator';
export default class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab : "home"
        }
    }
    render() {
        return (
            <View style={styles.container}>
              <TabNavigator>
                 <TabNavigator.Item
                 selected={this.state.selectedTab === 'home'}
                 selectedTitleStyle = {{color:'#2196F3'}}
                 title="主页"
                 renderIcon={() => <Image style={styles.image} source={require('../../img/hot.png') } />}
                 renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'#2196F3'}]} source={require('../../img/hot_dian.png') } />}
                 badgeText="1"
                 onPress={() => this.setState({ selectedTab: 'home' })}>
                     <PopularPage />
                 </TabNavigator.Item>
                 <TabNavigator.Item
                 selected={this.state.selectedTab === 'profile'}
                 selectedTitleStyle = {{color:'#2196F3'}}
                 title="朋友圈"
                 renderIcon={() => <Image style={styles.image} source={require('../../img/cart.png') } />}
                 renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'#2196F3'}]} source={require('../../img/friend.png') } />}
                 onPress={() => this.setState({ selectedTab: 'profile' })}>
                 <AsyncStorageTest />
                 </TabNavigator.Item>
                 <TabNavigator.Item
                 selected={this.state.selectedTab === 'cart'}
                 selectedTitleStyle = {{color:'#2196F3'}}
                 title="收藏"
                 renderIcon={() => <Image style={styles.image} source={require('../../img/xin2.png') } />}
                 renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'#2196F3'}]} source={require('../../img/cang.png') } />}
                 onPress={() => this.setState({ selectedTab: 'cart' })}>
                 <View style={styles.page3}>
                 <Text>我是第三个页面</Text>
                 </View>
                 </TabNavigator.Item>
                 <TabNavigator.Item
                 selected={this.state.selectedTab === 'my'}
                 selectedTitleStyle = {{color:'#2196F3'}}
                 title="我的"
                 renderIcon={() => <Image style={styles.image} source={require('../../img/me.png') } />}
                 renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'#2196F3'}]} source={require('../../img/men.png') } />}
                 onPress={() => this.setState({ selectedTab: 'my' })}>
                 <MyPage {...this.props}/>
                    </TabNavigator.Item>
                 </TabNavigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:"#e8e8e8",
    },
    page1: {
        flex:1,
        backgroundColor:"gray"
    },
    page2: {
        flex:1,
        backgroundColor:"yellow"
    },
    page3: {
        flex:1,
        backgroundColor:"green"
    },
    page4: {
        flex:1,
        backgroundColor:"blue"
    },
    image: {
        width:22,
        height:22
    }
});
